<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->

  <!--  第一步移动端适配 基本配置补充完全 -->



  <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,
    user-scalable=no”>


  <!-- 引入字体图标 -->
  <link rel="stylesheet" href="/static/css/font.css">
  <link rel="stylesheet" href="/static/css/iconfont.css">


  <title>myapp</title>
  <!--  适配rem 布局       rem  flex  -->

</head>

<body>
  <div id="app">



  </div>





  <script>



    // 引入rem 
    (function (doc, win) {
      console.log('111')
              var docEl = doc.documentElement,
                      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                      recalc = function () {
                          var clientWidth = docEl.clientWidth;
                          if (!clientWidth) return;
                          if(clientWidth>=750){
                              docEl.style.fontSize = '100px';
                          }else{
                            console.log('222')
                              docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                          }
                      };

              if (!doc.addEventListener) return;
              win.addEventListener(resizeEvt, recalc, false);
              doc.addEventListener('DOMContentLoaded', recalc, false);
          })(document, window);






    // function getRem(design_w, unit) {
    //   // console.log('111')
    //   var html = document.getElementsByTagName("html")[0];
    //   var real_w = document.documentElement.clientWidth;
    //   (real_w > design_w) && (real_w = design_w);
    //   html.style.fontSize = real_w / design_w * unit + "px";
    // }
    // getRem(750, 100);
    // // window.addEventListener("resize",getRem);
    // window.onresize = function () {
    //   // alert(1)
    //   getRem(750, 100)
    // };


  </script>


</body>

</html>